<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>蓝天驾校 - 教练管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    
    <style>
        .layui-layout-admin .layui-header {
            background-color: #409EFF;
        }
        
        .layui-side {
            background-color: #F5F7FA;
        }
        
        .layui-nav {
            background-color: #F5F7FA;
            color: #303133;
        }
        
        .layui-nav-tree .layui-nav-item a {
            color: #303133;
        }
        
        .layui-nav-tree .layui-nav-item a:hover {
            background-color: #E4F2FF;
            color: #409EFF;
        }
        
        .layui-nav-tree .layui-nav-child dd.layui-this, 
        .layui-nav-tree .layui-nav-child dd.layui-this a, 
        .layui-nav-tree .layui-this, 
        .layui-nav-tree .layui-this>a, 
        .layui-nav-tree .layui-this>a:hover {
            background-color: #E4F2FF;
            color: #409EFF;
        }
        
        .layui-nav-tree .layui-nav-bar {
            background-color: #409EFF;
        }
        
        .layui-card-header {
            border-bottom: 1px solid #EBEEF5;
            color: #303133;
            font-weight: 600;
        }
        
        .layui-btn-primary {
            border: 1px solid #EBEEF5;
            color: #606266;
        }
        
        .layui-btn-primary:hover {
            border-color: #409EFF;
            color: #409EFF;
        }
        
        .layui-btn {
            background-color: #409EFF;
        }
        
        .layui-btn-danger {
            background-color: #F56C6C;
        }
        
        .layui-table thead tr {
            background-color: #F5F7FA;
        }
        
        .layui-table th {
            font-weight: 600;
            color: #303133;
        }
        
        .layui-form-checkbox[lay-skin="primary"]:hover i {
            border-color: #409EFF;
        }
        
        .layui-form-checked[lay-skin="primary"] i {
            border-color: #409EFF;
            background-color: #409EFF;
        }
        
        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #409EFF;
        }
        
        .layui-input:focus, .layui-textarea:focus {
            border-color: #409EFF !important;
        }
        
        .user-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .admin-info {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #EBEEF5;
        }
        
        .admin-name {
            color: #303133;
            font-weight: 600;
        }
        
        .admin-role {
            color: #909399;
            font-size: 12px;
        }
        
        /* 教练管理页面特有样式 */
        .search-form {
            padding: 15px;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            margin-bottom: 15px;
        }
        
        .search-form .layui-form-item {
            margin-bottom: 0;
        }
        
        .search-form .layui-form-label {
            width: auto;
            padding: 9px 5px;
        }
        
        .search-form .layui-input-block {
            margin-left: 70px;
        }
        
        .batch-operation {
            margin-bottom: 15px;
        }
        
        .teacher-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
        }
    </style>
</head>
<body class="layui-layout-body">
    <!-- 管理系统主页面 -->
    <div class="layui-layout layui-layout-admin">
        <!-- 顶部导航 -->
        <div class="layui-header">
            <div class="layui-logo">蓝天驾校管理系统</div>
            
            <ul class="layui-nav layui-layout-right" style="background-color: #409EFF;">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-email"></i>
                        <span class="layui-badge-dot"></span>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-notice"></i>
                        <span class="layui-badge">3</span>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="https://picsum.photos/id/1025/200/200" class="layui-nav-img">
                        管理员
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="personalInfo">个人信息</a></dd>
                        <dd><a href="javascript:;" id="changePassword">修改密码</a></dd>
                        <hr>
                        <dd><a href="/zrz/daohanglanLayui" id="logout">退出登录</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        
        <!-- 左侧导航 -->
        <div class="layui-side layui-bg-white">
            <div class="admin-info">
                <img src="https://picsum.photos/id/1025/200/200" class="user-avatar">
                <div>
                    <div class="admin-name">系统管理员</div>
                    <div class="admin-role">管理员</div>
                </div>
            </div>
            
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="leftMenu">
                    <li class="layui-nav-item">
                        <a href="/zrz/guanliyuanXXLayui"><i class="layui-icon layui-icon-home"></i> 系统首页</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="layui-icon layui-icon-user"></i> 学员管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" data-url="student-list.html">学员列表</a></dd>
                            <dd><a href="javascript:;" data-url="student-add.html">新增学员</a></dd>
                            <dd><a href="javascript:;" data-url="student-import.html">批量导入</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="/zrz/jiaolianXXLayui"><i class="layui-icon layui-icon-user"></i> 教练管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" data-url="student-list.html">教练列表</a></dd>
                            <dd><a href="javascript:;" data-url="student-add.html">新增教练</a></dd>
                           
                        </dl>
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="layui-icon layui-icon-file"></i> 课程管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" data-url="course-list.html">课程列表</a></dd>
                            <dd><a href="javascript:;" data-url="course-add.html">新增课程</a></dd>
                            <dd><a href="javascript:;" data-url="course-schedule.html">课程安排</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="layui-icon layui-icon-template"></i> 评价管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" data-url="review-list.html">学员评价</a></dd>
                            <dd><a href="javascript:;" data-url="review-analysis.html">评价分析</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="layui-icon layui-icon-template"></i> 报名信息管理</a>
                
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="layui-icon layui-icon-set"></i> 系统设置</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" data-url="admin-list.html">管理员列表</a></dd>
                            <dd><a href="javascript:;" data-url="admin-add.html">新增管理员</a></dd>
                            <dd><a href="javascript:;" data-url="system-config.html">系统配置</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 中间内容区域 -->
        <div class="layui-body" id="content-container">
            <div class="layui-tab layui-tab-brief" lay-filter="content-tabs">
                <ul class="layui-tab-title">
                    <li class="layui-this" data-id="teacherList">报名信息管理</li>
                    
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <table id="xueyuanTable" lay-filter="xueyuanTable"></table>
                        </div>
                    </div>


                </ul>
            </div>
        </div>
        
        

        
        <!-- 底部信息 -->
        <div class="layui-footer">
            <div class="layui-container">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <p>© 2025 蓝天驾校管理系统 版权所有</p>
                    </div>
                    <div class="layui-col-md6 text-right">
                        <p>版本号：v1.0.0</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
 
<script th:inline="none">

layui.use(['table', 'layer'], function(){
    var table = layui.table;
    var layer = layui.layer;

    // 渲染表格并初始化分页
    table.render({
        elem: '#xueyuanTable',
        height: 'full-200',
        url: '/api/xueyuan/all', // 数据接口
        page: true, // 开启分页
        limit: 10, // 每页显示的条数
        limits: [10, 20, 30], // 每页条数的选择项
        cols: [[ // 表头
            {field: 'id', title: 'ID', width:80, sort: true},
            {field: 'name', title: '姓名', width:120},
            {field: 'gender', title: '性别', width:80},
            {field: 'age', title: '年龄', width:80, sort: true},
            {field: 'idCard', title: '身份证号', width:180},
            {field: 'phone', title: '电话', width:150},
            {field: 'email', title: '邮箱', width:180},
            {field: 'address', title: '地址', width:200},
            {field: 'course', title: '课程', width:120},
            {field: 'referrer', title: '推荐人', width:120},
            {field: 'remark', title: '备注', width:120},
            {field: 'createTime', title: '创建时间', width:180, templet: '<div>{{layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss")}}</div>'},
            {field: 'updateTime', title: '更新时间', width:180, templet: '<div>{{layui.util.toDateString(d.updateTime, "yyyy-MM-dd HH:mm:ss")}}</div>'}
        ]],
        parseData: function(res){ // 将返回的 json 数据进行解析
            return {
                "code": res.code || 0, // 解析接口状态
                "msg": res.message || '', // 解析提示文本
                "count": res.length || 0, // 解析数据长度（总条数）
                "data": res // 解析数据列表
            };
        },
        request: {
            pageName: 'page', // 页码的参数名称，默认：page
            limitName: 'limit' // 每页数据量的参数名，默认：limit
        }
    });

    // 监听工具条（如果有的话）
    table.on('tool(xueyuanTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'detail'){
            layer.msg('查看操作 - ID：'+ data.id);
        } else if(obj.event === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del(); // 删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            layer.msg('编辑操作 - ID：'+ data.id);
        }
    });
});


</script>
            
            
    
</body>
</html>    